<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风向分布</title>
    <script src="../echarts.min.js"></script>
    <script src="../lodash.min.js"></script>
    <style>
        .flex{
            display: flex;
        }
    </style>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main1" style="width: 100%; height: 500px"></div>
    <!-- <div id="mainr" style="width: 50%; height: 500px"></div> -->
    

    <script>
        // 指定图标的配置项和数据
        let option = {
            textStyle: {
                color: '#fff'
            },
            polar: {},
            // 极坐标系的角度轴
            angleAxis: {
                type: 'category',
                data: ['N', '', '', '', 'E', '', '', '', 'S','', '','','W', '','', ''],
                boundaryGap: false,
        　　    //坐标轴轴线设置
                axisLine: {
            　　　　lineStyle: {
            // 　　　　　　color: 'rgba(#20A1FF, 0.3)',
            // 　　　　　　color: 'rgba(32, 161, 255, .3)'
            　　　　　　    color: '#09335E'
                        // opacity: 0.3
            　　　　}
            　　},
                //分割线设置
            　　splitLine: {
            　　　　show: true,
                    lineStyle: {
                        // color: '#0B3A69',
                        color: 'rgba(32, 161, 255, .3)',
                        // opacity: 0.3
                    }
            　　},
                //刻度标签设置
            　　axisLabel: { 
                    margin: 12,
            　　　　textStyle: {
                        fontSize: 14,
                        color: '#fff',
            　　　　},
            　　}
            },
            // 极坐标系的径向轴
            radiusAxis: {
                type: 'value',
                axisLine: { //坐标轴轴线设置
            　　　　show: false,
            // 　　　　 lineStyle: {
            // 　　　　 	color: '#20A1FF',
            //             opacity: 0.3
            //         }
            　　},
            // 　　axisTick: { //坐标轴刻度设置
            // 　　　　show: false
            // 　　},
            　　axisLabel: { //刻度标签设置
            // 　　　　margin: 0, //刻度与坐标轴之间的距离
            　　　　textStyle: {
            　　　　　　color: 'rgba(255,255, 255, 0.3)',
                        // opacity: 0.3
            　　　　},
                    formatter:(val, index) => { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                        return `${val}%`;
                    },
            　　},
                splitLine: {
                    // show: false,
                    lineStyle: {
                        // color: '#20A1FF',
                        color: 'rgba(32, 161, 255, 0.3)',
                        // opacity: 0.3,
                        type: 'dashed'
                    }
                },
            },
            series: [
                {
                    name:'1#',
                    type: 'bar',
                    barWidth: 200,
                    data:[2, 2, 5, 4, 3, 5, 1, 6, 7, 8, 9, 12],
                    coordinateSystem: 'polar',
                    itemStyle:{
                        normal:{
                            color:'rgba(64,158,255,0.7)'
                        }
                        
                    }
                }
            ]
        };
        // 基于准备好的DOM，初始化echarts实例
        var chart1 = echarts.init(document.getElementById('main1'));


        // 使用刚指定的配置项和数据显示图表
        chart1.setOption(option)
    </script>
</body>
</html>